<template>
    <!--随机检查-->
    <div class="inspect">
        <header>
            <mt-header title="随机检查" style="background-color:#F9F9F9;color:#333333;">
                <router-link to="/check" slot="left">
                    <mt-button icon="back"></mt-button>
                </router-link>
            </mt-header>
        </header>
        <section>
            <img @click="actionSheet" src="../../../assets/img/default.png" />
            <mt-actionsheet
                :actions= "data"
                v-model="sheetVisible">
            </mt-actionsheet>
            <mt-cell title="项目名称" is-link>
                <span>{{'荣禾云图项目'}}</span>
            </mt-cell>
            <mt-cell title="检查类型" is-link>
                <span>{{'随机检查'}}</span>
            </mt-cell>
            <div class="con_for">
                <mu-container>
                    <mu-form ref="form" :model="validateForm" class="mu-demo-form">
                        <mu-form-item prop="select" label="所属区域" :rules="region">
                            <mu-select v-model="validateForm.region">
                                <mu-option v-for="option,index in options" :key="option" :label="option" :value="option"></mu-option>
                            </mu-select>
                        </mu-form-item>

                        <mu-form-item prop="textarea" label="检查部位" :rules="region">
                            <mu-text-field multi-line :rows="3" :rows-max="6" v-model="validateForm.textarea"></mu-text-field>
                        </mu-form-item>

                        <mu-flex align-items="center" style="padding: 10px 0 ;">
                            <span style="margin-right: 16px;">使用检查指导表</span>
                            <mu-radio @click="show1 = true" v-model="validateForm.select" style="margin-right: 16px;" value="top" label="是"></mu-radio>
                            <mu-radio @click="show1 = !show1" v-model="validateForm.select" style="margin-right: 16px;" value="left" label="否"></mu-radio>
                        </mu-flex>

                        <mt-cell title="检查指导表" is-link>
                            <span>{{'已选2个'}}</span>
                        </mt-cell>

                        <mu-container style="padding:0;margin:0;">
                            <mu-expansion-panel :zDepth="0">
                                <div slot="header">检查指导表名称 检查表1</div>
                                <section class="table">
                                    <div class="tr header">
                                        <div class="td">测试检查表</div>
                                    </div>
                                    <div class="tr subheader">
                                        <div class="td">检查项</div>
                                        <div class="td">检查内容</div>
                                        <div class="td">检查结果</div>
                                    </div>
                                    <div class="tr">
                                        <div class="td">检查项名</div>
                                        <div class="td"  style="width:200%;">
                                            <div class="tr">
                                                <div class="td">检查内容1</div>
                                                <div class="td">
                                                    <mu-checkbox label="有隐患" disabled></mu-checkbox>
                                                    <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                                                </div>
                                            </div>
                                            <div class="tr">
                                                <div class="td">检查内容2</div>
                                                <div class="td">
                                                    <mu-checkbox label="有隐患" disabled></mu-checkbox>
                                                    <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="td">
                                          <div class="td">
                                            <mu-checkbox label="有隐患" disabled></mu-checkbox>
                                            <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                                          </div>
                                          <div class="td">
                                            <mu-checkbox label="有隐患" disabled></mu-checkbox>
                                            <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                                          </div>
                                        </div> -->

                                    </div>
                                </section>
                            </mu-expansion-panel>
                        </mu-container>

                        <mu-flex align-items="center" style="padding: 10px 0 ;">
                            <span style="margin-right: 16px;">检查结果</span>
                            <mu-radio @click="show1 = true" v-model="validateForm.select" style="margin-right: 16px;" value="top" label="有问题"></mu-radio>
                            <mu-radio @click="show1 = !show1" v-model="validateForm.select" style="margin-right: 16px;" value="left" label="没问题"></mu-radio>
                        </mu-flex>
                        <!-- 无表有问题-->
                        <mu-container style="padding:0;margin:0;">
                            <mu-expansion-panel :zDepth="0">
                                <div style="padding:0;margin:0;" slot="header">问题1</div>
                                <div class="que">
                                    <mu-form-item prop="select" label="问题类型" :rules="region">
                                        <mu-select v-model="validateForm.region">
                                            <mu-option v-for="option,index in options" :key="option" :label="option" :value="option"></mu-option>
                                        </mu-select>
                                    </mu-form-item>
                                    <mt-radio
                                        title="问题等级"
                                        :value.sync="value"
                                        :options="['重大问题', '较大问题', '一般问题']">
                                    </mt-radio>
                                    <mt-cell title="整改责任人">
                                        <mu-button small fab color="#FF8A1B">
                                            <mu-icon value="edit"></mu-icon>
                                        </mu-button>
                                    </mt-cell>
                                </div>
                            </mu-expansion-panel>
                        </mu-container>
                        <!-- 无表有问题结束-->

                        <mu-container style="padding:0;margin:0;">
                            <mu-expansion-panel :zDepth="0">
                                <div style="padding:0;margin:0;color:#FF8A1B;" slot="header">更多</div>
                                <!--无表无问题更多-->
                                <!--<div class="">-->
                                    <!--现场照片-->
                                    <!--<img @click="actionSheet" src="../../../assets/img/default.png" />-->
                                    <!--<mt-cell title="抄送人">-->
                                         <!--<mt-palette-button content="+" @expand="main_log('expand')" @expanded="main_log('expanded')" @collapse="main_log('collapse')"-->
                                                           <!--direction="rt" class="pb" :radius="10" ref="target_1" mainButtonStyle="color:#fff;background-color:#FF8A1B;">-->
                                            <!--<div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(1)"></div>-->
                                        <!--</mt-palette-button>-->
                                    <!--</mt-cell>-->

                                    <!--<mu-form-item label="检查人签名" help-text="" prop="username" :rules="usernameRules">-->
                                        <!--<mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>-->
                                    <!--</mu-form-item>-->
                                <!--</div>-->

                                <!--无表有问题更多-->
                                <div class="" v-for="(i,index) in question">
                                    <mu-form-item prop="textarea" label="问题描述" :rules="region">
                                        <mu-text-field multi-line :rows="3" :rows-max="6" v-model="i.describe"></mu-text-field>
                                    </mu-form-item>
                                    <img @click="actionSheet" src="../../../assets/img/default.png" />
                                    <mu-form-item prop="textarea" label="整改期限" :rules="region">
                                        <mu-date-input v-model="i.term" no-display label-float full-width></mu-date-input>
                                    </mu-form-item>
                                    <mu-form-item prop="textarea" label="整改要求" :rules="region">
                                        <mu-text-field multi-line :rows="3" :rows-max="6" v-model="i.Requirement"></mu-text-field>
                                    </mu-form-item>
                                    <mu-form-item prop="select" label="责任人单位" :rules="region">
                                        <mu-select v-model="i.Company">
                                            <mu-option v-for="option,index in options" :key="option" :label="option" :value="option"></mu-option>
                                        </mu-select>
                                    </mu-form-item>
                                    <mt-cell title="整改责任人">
                                        <mu-button small fab color="#FF8A1B">
                                            <mu-icon value="edit"></mu-icon>
                                        </mu-button>
                                    </mt-cell>
                                    <mt-cell title="复查人">
                                        <mu-button small fab color="#FF8A1B">
                                            <mu-icon value="edit"></mu-icon>
                                        </mu-button>
                                    </mt-cell>
                                </div>
                                <mu-button color="primary" @click="del(index)">删除</mu-button>
                                <mu-button color="primary" @click="add">增加问题</mu-button>
                                <mu-flex align-items="center" style="padding: 10px 0 ;">
                                    <span style="margin-right: 16px;">短信通知整改责任人</span>
                                    <mu-radio @click="show1 = true" v-model="validateForm.select" style="margin-right: 16px;" value="top" label="是"></mu-radio>
                                    <mu-radio @click="show1 = !show1" v-model="validateForm.select" style="margin-right: 16px;" value="left" label="否"></mu-radio>
                                </mu-flex>
                                <mu-form-item label="检查人签名" help-text="" prop="username" :rules="usernameRules">
                                    <mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
                                </mu-form-item>
                                <!---->
                            </mu-expansion-panel>
                        </mu-container>
                        <mu-form-item style="display: flex;justify-content: center;align-items: center;">
                            <mu-button color="primary" @click="submit">保存</mu-button>
                            <mu-button color="primary" @click="submit">完成</mu-button>
                            <!--<mu-button @click="clear">重置</mu-button>-->
                        </mu-form-item>
                    </mu-form>
                </mu-container>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: "inspect",
        data () {
            return{
                selected:true,
                question:[
                    {
                        question:'',//问题描述
                        term:'',//整改期限
                        Requirement:'',//整改要求
                        Company:'',//责任人单位
                    }
                ],
                main_log(val) {
                    console.log('main_log', val);
                },
                sub_log(val) {
                    console.log('sub_log', val);
                    this.$refs.target_1.collapse();
                },
                sheetVisible:true,
                data:[
                    {
                        name:'拍照',
                        method : this.getCamera,
                    },
                    {
                        name:'从相册中选择',
                        method : this.getLibrary,
                    }
                ],
                sheetVisible: false,
                options: [
                    'Option 1', 'Option 2', 'Option 3', 'Option 4',
                    'Option 5', 'Option 6', 'Option 7', 'Option 8',
                    'Option 9', 'Option 10'
                ],
                region:[
                    { validate: (val) => !!val, message: '必须填写所属区域'},
                    { validate: (val) => val.length >= 3, message: '用户名长度大于3'}
                ],
                usernameRules:[
                    { validate: (val) => !!val, message: '检查人签名'},
                    { validate: (val) => val.length >= 3, message: '用户名长度大于3'}
                ],
                validateForm: {
                    username: '',
                    password: '',
                    isAgree: false,
                    region:'',//所属区域
                    textarea:''
                },
            }
        },
        created () {

        },
        mounted () {

        },
        methods: {
            del (index) {
                if(this.question.length == 0){
                    return
                };
                this.question.splice(index, 1)
            },
            add () {
                let obj={
                    question:'',//问题描述
                    term:'',//整改期限
                    Requirement:'',//整改要求
                    Company:'',//责任人单位
                }
                this.question.push(obj);
            },
            submit () {
                this.$refs.form.validate().then((result) => {
                    console.log('form valid: ', result)
                });
            },
            actionSheet: function () {
                // 打开action sheet
                this.sheetVisible = true;
            },
            getCamera: function () {
                console.log("打开照相机")
            },
            getLibrary: function () {
                console.log("打开相册")
            }
        }
    }
</script>

<style scoped lang="scss">
    .inspect{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        header {
            width:100%;
        }
        section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
            .con_for{
                margin:10px 0;
                background: white;
            }
            .table{
                width:100%;
                height:auto;
                border:1px solid #dedede;
                font-size:0.12rem;
                line-height:0.2rem;
                .tr{
                    width:100%;
                    border-bottom:1px solid #dedede;
                    display:flex;
                    justify-content:space-between;
                    align-items:center;
                    .td{
                        border-left:1px solid #dedede;
                        width:100%;
                        text-align:center;
                        .tr{
                            border-bottom:1px solid #dedede;
                            border-left:none;
                        }
                        >.tr:last-child{
                            border:none;
                        }
                    }
                    >.td:first-child{
                        border:none;
                    }
                    .tr{
                        border-left:1px solid #dedede;
                    }
                }
                >.tr:last-child{
                    border:none;
                }
                .header{
                    background-color:#ddd;
                    color:#000;
                }
                .subheader{
                    background-color:#eee;
                    color:#333;
                }
            }
        }
    }
</style>
